<template>
  <div class="body">
    <div class="integral-detail-wrapper">
      <div class="banner"></div>
      <div class="activeTitle blockB contentInfo">
        <p class="activeTitleName" ref="">{{product.resetTitle}}</p>
        <p class="signNumP"><i class=" iconPoint"></i><em class="signNum">{{product.point}}</em><span>积分</span></p>
        <div class="border"></div>
        <div class="codeText">
          <p class="">礼品编号：{{product.code}}<span class="endTime">兑换截止时间：{{product.startTime}}-{{product.endTime}}</span></p>
        </div>
      </div>
      <div class="blockB contentInfo baseInfo">
        <p class="contentTilte">礼品详情</p>
        <div class="border"></div>
        <div class="contentDetailInfo">
          这里是活动图文内容，这里是活动图文内容，这里是活动文内容，这里是活动图文内容，这里是活动图文内容，这里是活动图文内容。这里是活动图文内容，这里是活动图文内容，这里是活动文内容，这里是活动图文内容，这里是活动图文内容，这里是活动图文内容。这里是活动图文内容，这里是活动图文内容，这里是活动文内容，这里是活动图文内容，这里是活动图文内容，
        </div>
        <div>
          <img src="" alt="" class="contentImg">
        </div>
      </div>
      <div class="blockB contentInfo baseInfo lastBreak">
        <p class="contentTilte">兑换说明</p>
        <div class="border"></div>
        <div class="contentDetailInfo">
          {{product.description}}
        </div>
      </div>
      <div class="buyBlock" >
        <div class="price"><span>单价：<span class="num">8000</span>  积分</span></div>
        <div class="signButton " v-on:click="popup">立即兑换</div>
      </div>
      <transition name="fade">
        <div class="popModel" v-if="isShow">
          <div class="popBg" @click="closePop"></div>
          <div class="popupContent">
            <div class="poptitle">
              <span class="text">礼品名称：Dyson戴森 吹风机 Supersonic HD01 紫红</span>
              <a class="icon close" v-on:click="closePop" href="javascript:;"></a>
            </div>
            <div class="popupCount">
              <i class="icon minus active" v-if="minus" v-on:click="toMinus"></i>
              <i class="icon minus" v-else></i>
              <input v-model.number="count" type="number" v-on:keyup="toKeyup">
              <i class="icon plus active" v-on:click="toPlus"></i>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'integralDetail',
    data() {
      return {
        isShow: false,
        count: 1,
        minus: false,
      }
    },
    mounted(){
      // 获取商品详情信息
      this.$store.dispatch('getProductInfo', {id: this.$route.params.id})
    },
    computed: {
      ...mapGetters([
        'product',
      ])
    },
    methods: {
      // ...mapMutations({
      //   add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
      // }),
      popup(){
        if (this.isShow) {
          // 确认去兑换
          this.$store.dispatch('setOrderInfo', {count: this.count}).then(() => {
            // 跳转页面
            this.$router.push(`/integral/${this.$route.params.id}/order`);
          })
        } else {
          this.isShow = true;
          document.body.style.overflow = "hidden";
        }
      },
      closePop(){
        this.isShow = false;
        document.body.style.overflow = "scroll";
      },
      toKeyup(){
        if (this.count > 100) {
          this.count = 100;
        }
        this.isMinus();
      },
      toMinus(){
        this.count --;
        if (this.count < 1) {
          this.count = 1;
        }
        this.isMinus();
      },
      toPlus(){
        this.count ++;
        if (this.count > 100) {
          this.count = 100;
        }
        this.isMinus();
      },
      isMinus(){
        // 是否可以减
        if (this.count > 1) {
          this.minus = true;
        } else {
          this.minus = false;
        }
      }
    }

  }
</script>
<style lang="postcss" scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .integral-detail-wrapper {
    width: 375px;
    font-size: 13px;
    background: #F6F6F6;
    color:#333;
    .blockB{
      margin-bottom: 10px;
    }
    .border{
      width: 335px;
      height: 1px;
      background: #EEEEEE;
    }
    .contentInfo{
      background: #fff;
      padding: 0 20px 0 20px;
    }

    .banner{
      width: 375px;
      height: 240px;
      background:#f3f3f3;
    }
    .lastBreak{
      padding-bottom: 55px;
    }
    .activeTitle{
      font-size: 12px;
      color: #666;
      .activeTitleName{
        line-height: 25px;
        font-size: 17px;
        color:#333;
        padding:10px 0 3px 0;
        font-weight:bold;
      }
      .codeText{
        height: 45px;
        line-height: 45px;
        color:#aaa;
      }
      .iconPoint{
        width: 14px;
        height: 12px;
        display: inline-block;
        background:url("../../../../../static/iconPoint.png") left top no-repeat;
        background-size:14px 12px;
        margin-right:7px;
      }
      .signNumP{
        height: 25px;
        line-height: 25px;
        margin-bottom: 10px;
      }
      .signNum{
        font-style:normal;
        color:#FD5729;
        font-size: 19px;
        margin-right:3px;
      }

      .endTime{
        float: right;
      }
    }
    .baseInfo{
      p{
        height: 65px;
        line-height:65px;
      }
      .contentTilte{
        text-align:center;
        font-size: 15px;
      }
    }
    .contentDetailInfo{
      padding-top:13px;
      .contentImg{
        height: 200px;;
      }
    }
    .buyBlock{
      position: fixed;
      bottom:0;
      width: 375px;
      height: 55px;
      line-height: 55px;
      color: #666;
      background: #ffffff;
      .price{
        width: 255px;
        height: 55px;
        border-top:1px solid #EEEEEE;
        box-sizing: border-box;
        padding-left:20px;
        background:#fff;
        font-size: 12px;
        .num{
          font-size: 18px;
          color: #FD5729;
        }
      }
      .signButton{
        position: absolute;
        right: 0;
        top:0;
        width: 120px;
        height: 55px;
        background:#FD5729;
        text-align: center;
        line-height: 52px;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
      }
    }

    .popModel{
      width: 375px;
      position: fixed;
      left: 0;top: 0;right: 0;
      bottom: 55px;
      .popBg{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        opacity: 0.5;
      }
      .popupContent{
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        width: 375px;
        height: 120px;
        .poptitle{
          font-size: 15px;
          margin:13px 0 30px 20px;
          position: relative;
          a{
            position: absolute;
            top:0;
            right: 18px;
            color:#aaa;
            font-size:20px;
          }
          .text{
            width: 275px;
            height: 21px;
            overflow: hidden;
            display: inline-block;
          }
        }
        .popupCount{

          width: 126px;
          height: 82px;
          margin: 0 auto;
          font-size:18px;
          input{
            width:60px;
            height: 32px;
            border:1px solid #eee;
            font-size:18px;
            border-radius: 5px;
            text-align:center;
          }
          i{
            width: 18px;
            font-size:20px;
            font-weight: bold;
            color:#EEE;
            margin:0 3px;
            &.active{
              color:#FD5729;
            }
          }
        }
      }
    }
  }
</style>
